<template>
    <div>
        <div>
            <input type="text" placeholder="请输入任务" v-model="inputTask" />
            <button v-on:click="getTask">提交任务</button>
        </div>
        <div>
            <ul>
                <li v-on:click="done(item.id)" v-for="item in showTask" v-bind:key="item.id" v-bind:class="item.state">
                    {{ item.task }}
                </li>
            </ul>
        </div>
        <div>
            <button v-on:click="changeBtn('all')" v-bind:class="{ active: btnState == 'all' }">
                全部
            </button>
            <button v-on:click="changeBtn('done')" v-bind:class="{ active: btnState == 'done' }">
                已完成
            </button>
            <button v-on:click="changeBtn('undone')" v-bind:class="{ active: btnState == 'undone' }">
                未完成
            </button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            taskList: [
                { task: "学习html", state: "done", id: 0 },
                { task: "学习css", state: "done", id: 1 },
                { task: "学习JS", state: "done", id: 2 },
                { task: "学习Vue", state: "undone", id: 3 },
                { task: "学习React", state: "undone", id: 4 },
            ],
            inputTask: "",
            btnState: "",
        };
    },
    methods: {
        getTask() {
            let t = {
                task: this.inputTask,
                state: "undone",
                id: this.taskList.length,
            };
            this.taskList.unshift(t);
            this.inputTask = "";
        },
        done(id) {
            for (let item of this.taskList) {
                if (item.id == id) {
                    item.state = item.state == "done" ? "undone" : "done";
                    break;
                }
            }
        },
        changeBtn(state) {
            this.btnState = state;
        },
    },
    computed: {
        showTask() {
            console.log(666);
            switch (this.btnState) {
                case "done":
                    return this.taskList.filter((item) => item.state == "done");
                case "undone":
                    return this.taskList.filter((item) => item.state == "undone");
                default:
                    return this.taskList;
            }
        },
    },
};
</script>

<style scoped>
.active {
    border: 1px solid red;
    background-color: red;
    color: white;
}

.done {
    color: pink;
    text-decoration: line-through;
}

.undone {
    color: aqua;
}
</style>